// 自适应主题变量定义
$primary-color: #4a90e2;
$primary-color-hover: #357abd;

// 明亮主题色彩系统
$text-primary: rgba(0, 0, 0, 0.87);
$text-secondary: rgba(182, 178, 178, 0.6);
$text-tertiary: rgba(131, 131, 131, 0.38);

// 明亮主题使用微妙的色彩而不是纯白
$surface-elevated: rgba(248, 250, 252, 0.8);
$surface-overlay: rgba(255, 255, 255, 0.95);
$border-light: rgba(207, 203, 203, 0.08);
$border-medium: rgba(196, 194, 194, 0.12);
$divider: rgba(155, 152, 152, 0.06);
$hover-overlay: rgba(0, 0, 0, 0.04);

// 自然阴影定义
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);

.tech-profile-page {
  min-height: 100vh;
  color: $text-primary;
  transition: all 0.3s ease;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 82px;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid $divider;
  transition: all 0.3s ease;

  .profile-info {
    display: flex;
    align-items: center;
    gap: 16px;

    .user-info {
      .name-row {
        display: flex;
        align-items: center;
        gap: 10px;

        h2 {
          font-size: 21px;
          font-weight: 600;
          margin: 0;
          color: $text-primary;
          transition: color 0.3s ease;
        }
      }

      .intro {
        color: $text-secondary;
        font-size: 13px;
        margin: 0;
        transition: color 0.3s ease;
      }

      .id-info {
        color: $text-tertiary;
        font-size: 11.5px;
        margin: 0;
        transition: color 0.3s ease;
      }
    }
  }

  .profile-version {
    .version-text {
      color: $text-primary;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      background: $hover-overlay;
      border-radius: 16px;
      transition: all 0.3s ease;
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;

  .section-title {
    color: $text-primary;
    font-size: 17px;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .project-search {
    min-width: 180px;
    width: 240px;
  }
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  padding: 0 24px 24px 24px;

  .card {
    background: $surface-overlay;
    backdrop-filter: blur(10px);
    border-radius: 16px;
    min-height: 92px;
    box-shadow: $shadow-sm;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 14px;
    // border: 1px solid $border-light;
    transition: all 0.18s ease;

    &:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: $shadow-md;
      border-color: $primary-color-hover;
    }

    .icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      overflow: hidden;
      flex-shrink: 0;

      :deep(.n-image) {
        border-radius: 8px;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;

      .title {
        color: $text-primary;
        font-size: 15px;
        font-weight: 600;
        transition: color 0.3s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .bagName {
        font-size: 12px;
        color: $text-secondary;
        transition: color 0.3s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .version-tag {
      margin-left: auto;
      flex-shrink: 0;
    }
  }
}

.table-area {
  display: flex;
  gap: 16px;
  padding: 0 24px 24px 24px;

  .table-block {
    flex: 1;
    background: $surface-overlay;
    backdrop-filter: blur(10px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid $border-light;
    box-shadow: $shadow-sm;
    transition: all 0.3s ease;

    .table-title {
      background: $hover-overlay;
      color: $text-primary;
      font-size: 15px;
      font-weight: 600;
      padding: 13px 18px;
      border-bottom: 1px solid $divider;
      transition: all 0.3s ease;
    }

    :deep(.n-data-table-th) {
      background: $hover-overlay;
      color: $text-secondary;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    :deep(.n-data-table-td) {
      font-size: 13px;
      color: $text-primary;
      transition: color 0.3s ease;
    }

    :deep(.n-data-table-tr) {
      cursor: pointer;
      transition: background 0.16s ease;

      &:hover {
        background: $hover-overlay;
      }
    }
  }
}

.detail-modal {
  :deep(.n-card) {
    border-radius: 22px !important;
    background: $surface-overlay !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: $shadow-lg !important;
    transition: all 0.3s ease !important;
    border: 1px solid $border-medium !important;

    .n-card-header {
      border-bottom: none !important;
      background: transparent;
    }
  }

  .modal-header {
    display: flex;
    align-items: center;
    gap: 14px;

    .icon {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      overflow: hidden;
      flex-shrink: 0;

      :deep(.n-image) {
        border-radius: 8px;
      }
    }

    .modal-title-block {
      display: flex;
      flex-direction: column;
      gap: 2px;

      .modal-title {
        font-size: 18px;
        font-weight: 600;
        color: $text-primary;
        transition: color 0.3s ease;
      }
    }
  }

  .modal-content {
    .modal-item {
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      .label {
        color: $primary-color;
        font-size: 14px;
        min-width: 80px;
        transition: color 0.3s ease;
      }

      .text {
        color: $text-primary;
        font-size: 14px;
        transition: color 0.3s ease;
        word-break: break-all;

        a {
          color: $primary-color;
          text-decoration: none;
          transition: color 0.3s ease;
          
          &:hover {
            color: $primary-color-hover;
          }
        }
      }
    }
  }
}

// 系统主题适配
@media (prefers-color-scheme: dark) {
  .tech-profile-page {

    color: var(--text-primary);

    .profile-header {
      border-bottom-color: var(--divider);

      .profile-info .user-info {
        h2 { color: var(--text-primary); }
        .intro { color: var(--text-secondary); }
        .id-info { color: var(--text-tertiary); }
      }

      .profile-version .version-text {
        color: var(--text-primary);
        background: var(--hover-overlay);
      }
    }

    .section-header .section-title {
      color: var(--text-primary);
    }

    .cards-grid .card {
      background: var(--surface-overlay);
      border-color: var(--border-light);

      .info {
        .title { color: var(--text-primary); }
        .bagName { color: var(--text-secondary); }
      }
    }

    .table-area .table-block {
      background: var(--surface-overlay);
      border-color: var(--border-light);

      .table-title {
        background: var(--hover-overlay);
        color: var(--text-primary);
        border-bottom-color: var(--divider);
      }

      :deep(.n-data-table-th) {
        background: var(--hover-overlay);
        color: var(--text-secondary);
      }

      :deep(.n-data-table-td) {
        color: var(--text-primary);
      }

      :deep(.n-data-table-tr:hover) {
        background: var(--hover-overlay);
      }
    }

    .detail-modal {
      :deep(.n-card) {
        background: var(--surface-overlay) !important;
        border-color: var(--border-medium) !important;
      }

      .modal-header .modal-title-block .modal-title {
        color: var(--text-primary);
      }

      .modal-content .modal-item .text {
        color: var(--text-primary);
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 968px) {
  .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .table-area {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}